<template>
  <el-card class="data-board">
    <div class="tab-list">
      <template v-for="item in timeFilter">
        <div :key="item.id" :class="{'active': active === item.id}" class="tab-item" @click="handleClick(item)">
          {{ item.name }}
        </div>
      </template>
    </div>
    <el-row>
      <el-col :span="8">
        <span v-if="data.orderAmount !== null">
          {{ data.orderAmount | bigDataFilter }}
        </span>
        <span v-else>--</span>
        <div>订单金额</div>
      </el-col>
      <el-col :span="8">
        <span v-if="data.orderNum !== null">
          {{ data.orderNum | bigDataFilter }}
        </span>
        <span v-else>--</span>
        <div>订单数量</div>
      </el-col>
      <el-col :span="8">
        <span v-if="data.orderAccount !== null">
          {{ data.orderAccount | bigDataFilter }}
        </span>
        <span v-else>--</span>
        <div>订单核销金额</div>
      </el-col>
      <el-col :span="8">
        <span v-if="data.pipelineAmount !== null">
          {{ data.pipelineAmount | bigDataFilter }}
        </span>
        <span v-else>--</span>
        <div>流水金额</div>
      </el-col>
      <el-col :span="8">
        <span v-if="data.unWriteOffAmount !== null">
          {{ data.unWriteOffAmount | bigDataFilter }}
        </span>
        <span v-else>--</span>
        <div>待核销流水</div>
      </el-col>
      <el-col :span="8">
        <span v-if="data.writeOffAmount !== null">
          {{ data.writeOffAmount | bigDataFilter }}
        </span>
        <span v-else>--</span>
        <div>已完成流水</div>
      </el-col>
    </el-row>
  </el-card>
</template>
<script>
import { bigDataFilter } from '@/filters/number';
import { getHomeData } from '@/api/home';
export default {
  filters: { bigDataFilter },
  data() {
    return {
      timeFilter: [
        {
          id: 'day',
          name: '今日'
        },
        {
          id: 'week',
          name: '本周'
        },
        {
          id: 'month',
          name: '本月'
        },
        {
          id: 'year',
          name: '本年'
        }
      ],
      active: 'day',
      data: {}
    };
  },
  created() {
    this.getHomeData();
  },
  methods: {
    handleClick(item) {
      this.active = item.id;
      this.getHomeData();
    },
    getHomeData() {
      getHomeData({ type: this.active }).then(res => {
        this.data = res.data;
      }).catch(err => {
        console.error(err);
      });
    }
  }
};
</script>
<style lang="scss">
.data-board {
  border-radius: 12px;
  .tab-list {
    display: flex;
    justify-content: center;
    align-items: center;
    .tab-item {
      cursor: pointer;
      padding: 0 10px;
    }
    .active {
      color: #406eff;
    }
  }
}
</style>
